<template>
    <button
      class="es-button"
      :class="{
        'es-button--default': type === 'default' && !plain && !disabled,
        'es-button--success': type === 'success' && !plain && !disabled,
        'es-button--warning': type === 'warning' && !plain && !disabled,
        'es-button--error': type === 'error' && !plain && !disabled,
        'es-button--default-is-plain': type === 'default' && plain && !disabled,
        'es-button--success-is-plain': type === 'success' && plain && !disabled,
        'es-button--warning-is-plain': type === 'warning' && plain && !disabled,
        'es-button--error-is-plain': type === 'error' && plain && !disabled,
        'es-button--default-is-plain-is-disabled':
          type === 'default' && plain && disabled,
        'es-button--success-is-plain-is-disabled':
          type === 'success' && plain && disabled,
        'es-button--warning-is-plain-is-disabled':
          type === 'warning' && plain && disabled,
        'es-button--error-is-plain-is-disabled':
          type === 'error' && plain && disabled,
        'es-button--default-is-disabled': type === 'default' && disabled,
        'es-button--success-is-disabled': type === 'success' && disabled,
        'es-button--warning-is-disabled': type === 'warning' && disabled,
        'es-button--error-is-disabled': type === 'error' && disabled,
        'es-button-is-round': round,
        'es-button--small': size === 'small',
        'es-button--large': size === 'large',
        'es-button--mini': size === 'mini'
      }"
      :style="style"
    >
      <slot></slot>
    </button>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from "vue";

const props = defineProps({
  type: {
    type: String,
    default: "default",
    validator(value: string) {
      return ["default", "success", "warning", "error"].includes(value);
    }
  },
  plain: {
    type: Boolean,
    default: false,
  },
  round: {
    type: Boolean,
    default: false,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  size: {
    type: String,
    default: "default",
    validator(value: string) {
      return ["large", "default", "small", "mini"].includes(value);
    }
  }
});
const style = ref({});
const setStyle = (flag: string = "") => {
  if (props.type === "default") {
    return {
      backgroundColor: `var(--es-button--default${flag})`,
      borderColor: `var(--es-button--default${flag})`,
    };
  } else if (props.type === "success") {
    return {
      backgroundColor: `var(--es-button--success${flag})`,
      borderColor: `var(--es-button--success${flag})`,
    };
  } else if (props.type === "warning") {
    return {
      backgroundColor: `var(--es-button--warning${flag})`,
      borderColor: `var(--es-button--warning${flag})`,
    };
  } else {
    return {
      backgroundColor: `var(--es-button--error${flag})`,
      borderColor: `var(--es-button--error${flag})`,
    };
  }
};
onMounted(() => {});
</script>

<style lang="scss" scoped>
.es-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  user-select: none;
  height: var(--es-size--default);
  white-space: nowrap;
  text-align: center;
  color: var(--es-white--color);
  background-color: var(--es-button--default);
  border-color: var(--es-button--default);
  border-radius: var(--es-border-radius-base);
  border-width: var(--es-border-width);
  border-style: var(--es-border-style);
  padding: 8px 15px;


  /* 默认样式  */
  &--default {
    background-color: var(--es-button--default);
    border-color: var(--es-button--default);
    &-is-disabled {
      color: var(--es-button--disabled-text-color);
      background-color: var(--es-button--default--disabled);
      border-color: var(--es-button--default--disabled);
      cursor: not-allowed;
      pointer-events: none;
    }
    &-is-disabled:hover {
      color: var(--es-button--disabled-text-color);
      background-color: var(--es-button--default--disabled);
      border-color: var(--es-button--default--disabled);
      cursor: not-allowed;
      pointer-events: none;
    }
    &-is-plain {
      color: var(--es-button--default);
      background-color: var(--es-default--color--light--5);
      border-color: var(--es-button--default);

      &-is-disabled {
        color: var(--es-default--color--light--2);
        background-color: var(--es-default--color--light--5);
        cursor: not-allowed;
        pointer-events: none;
      }
      &-is-disabled:hover {
        color: var(--es-default--color--light--2);
        background-color: var(--es-default--color--light--5);
        cursor: not-allowed;
        pointer-events: none;
      }
    }
    &-is-plain:hover {
      color: var(--es-white--color);
      background-color: var(--es-button--default);
    }
    &-is-plain:active {
      background-color: var(--es-button--default--active);
      border-color: var(--es-button--default--active);
    }
  }
  &--default:hover {
    background-color: var(--es-button--default--hover);
    border-color: var(--es-button--default--hover);
  }
  &--default:active {
    background-color: var(--es-button--default--active);
    border-color: var(--es-button--default--active);
  }
  /* 成功样式  */
  &--success {
    background-color: var(--es-button--success);
    border-color: var(--es-button--success);
    &-is-disabled {
      color: var(--es-button--disabled-text-color);
      background-color: var(--es-button--success--disabled);
      border-color: var(--es-button--success--disabled);
      cursor: not-allowed;
      pointer-events: none;
    }
    &-is-disabled:hover {
      color: var(--es-button--disabled-text-color);
      background-color: var(--es-button--success--disabled);
      border-color: var(--es-button--success--disabled);
      cursor: not-allowed;
      pointer-events: none;
    }
    &-is-plain {
      color: var(--es-button--success);
      background-color: var(--es-success--color--light--5);
      border-color: var(--es-button--success);

      &-is-disabled {
        color: var(--es-success--color--light--2);
        background-color: var(--es-success--color--light--5);
        cursor: not-allowed;
        pointer-events: none;
      }
      &-is-disabled:hover {
        color: var(--es-success--color--light--2);
        background-color: var(--es-success--color--light--5);
        cursor: not-allowed;
        pointer-events: none;
      }
    }
    &-is-plain:hover {
      color: var(--es-white--color);
      background-color: var(--es-button--success);
    }
    &-is-plain:active {
      background-color: var(--es-button--success--active);
      border-color: var(--es-button--success--active);
    }
  }
  &--success:hover {
    background-color: var(--es-button--success--hover);
    border-color: var(--es-button--success--hover);
  }
  &--success:active {
    background-color: var(--es-button--success--active);
    border-color: var(--es-button--success--active);
  }
  /* 警告样式  */
  &--warning {
    background-color: var(--es-button--warning);
    border-color: var(--es-button--warning);
    &-is-disabled {
      color: var(--es-button--disabled-text-color);
      background-color: var(--es-button--warning--disabled);
      border-color: var(--es-button--warning--disabled);
      cursor: not-allowed;
      pointer-events: none;
    }
    &-is-disabled:hover {
      color: var(--es-button--disabled-text-color);
      background-color: var(--es-button--warning--disabled);
      border-color: var(--es-button--warning--disabled);
      cursor: not-allowed;
      pointer-events: none;
    }
    &-is-plain {
      color: var(--es-button--warning);
      background-color: var(--es-warning--color--light--5);
      border-color: var(--es-button--warning);

      &-is-disabled {
        color: var(--es-warning--color--light--2);
        background-color: var(--es-warning--color--light--5);
        cursor: not-allowed;
        pointer-events: none;
      }
      &-is-disabled:hover {
        color: var(--es-warning--color--light--2);
        background-color: var(--es-warning--color--light--5);
        cursor: not-allowed;
        pointer-events: none;
      }
    }
    &-is-plain:hover {
      color: var(--es-white--color);
      background-color: var(--es-button--warning);
    }
    &-is-plain:active {
    background-color: var(--es-button--warning--active);
    border-color: var(--es-button--warning--active);
  }
  }
  &--warning:hover {
    background-color: var(--es-button--warning--hover);
    border-color: var(--es-button--warning--hover);
  }
  &--warning:active {
    background-color: var(--es-button--warning--active);
    border-color: var(--es-button--warning--active);
  }
  /* 错误样式  */
  &--error {
    background-color: var(--es-button--error);
    border-color: var(--es-button--error);
    &-is-disabled {
      color: var(--es-button--disabled-text-color);
      background-color: var(--es-button--error--disabled);
      border-color: var(--es-button--error--disabled);
      cursor: not-allowed;
      pointer-events: none;
    }
    &-is-disabled:hover {
      color: var(--es-button--disabled-text-color);
      background-color: var(--es-button--error--disabled);
      border-color: var(--es-button--error--disabled);
      cursor: not-allowed;
      pointer-events: none;
    }
    &-is-plain {
      color: var(--es-button--error);
      background-color: var(--es-error--color--light--5);
      border-color: var(--es-button--error);

      &-is-disabled {
        color: var(--es-error--color--light--2);
        background-color: var(--es-error--color--light--5);
        cursor: not-allowed;
        pointer-events: none;
      }
      &-is-disabled:hover {
        color: var(--es-error--color--light--2);
        background-color: var(--es-error--color--light--5);
        cursor: not-allowed;
        pointer-events: none;
      }
    }
    &-is-plain:hover {
      color: var(--es-white--color);
      background-color: var(--es-button--error);
    }
    &-is-plain:active {
    background-color: var(--es-button--error--active);
    border-color: var(--es-button--error--active);
  }
  }
  &--error:hover {
    background-color: var(--es-button--error--hover);
    border-color: var(--es-button--error--hover);
  }
  &--error:active {
    background-color: var(--es-button--error--active);
    border-color: var(--es-button--error--active);
  }
  /* 尺寸 */
  &--large {
    height: var(--es-size--large);
    padding: 12px 19px;
    font-size: 14px;
    border-radius: var(--es-border-radius-base);
  }
  &--small {
    height: var(--es-size--small);
    padding: 5px 11px;
    font-size: 12px;
    border-radius: calc(var(--es-border-radius-base) - 1px);
  }
  &--mini {
    height: var(--es-size--mini);
    padding: 5px 11px;
    font-size: 11px;
    border-radius: calc(var(--es-border-radius-base) - 1px);

  }
  &-is-round {
    border-radius: var(--es-border-radius-round);
  }
}
</style>
